<template>
  <div
    class="fixed top-0 left-0 w-screen h-screen text-xl z-20 backdrop-blur-3xl bg-transparent pb-2 overflow-y-auto xl:px-2"
  >
    <m-navbar v-if="isMobileTerminal" :sticky="true">
      图片详情
      <template #right>
        <m-svg-icon
          name="share"
          class="w-3 h-3"
          fillClass="fill-zinc-900 dark:fill-zinc-200"
        ></m-svg-icon>
      </template>
    </m-navbar>
    <!-- pc端详情 -->
    <m-svg-icon
      v-else
      name="close"
      class="w-3 h-3 ml-1 p-0.5 cursor-pointer duration-200 rounded-sm hover:bg-zinc-100 absolute right-2 top-2"
      fillClass="fill-zinc-900 dark:fill-zinc-200"
      @click="onTapClose"
    ></m-svg-icon>
    <div class="xl:w-[80%] xl:h-full xl:mx-auto xl:rounded-lg xl:flex">
      <img
        :src="pictrueInfo.photo"
        class="w-screen mb-2 xl:w-/5 xl:h-full xl:rounded-tl-lg xl:roounded-bl-lg"
      />
      <div
        class="xl:w-2/5 xl:h-full xl:bg-white xl:dark:bg-zinc-900 xl:rounded-tr xl:rounded-br xl:p-3"
      >
        <!-- 收藏PC端下 -->
        <div class="flex justify-between mb-2" v-if="!isMobileTerminal">
          <m-svg-icon
            name="share"
            class="w-4 h-4 px-0.5 cursor-pointer hover:bg-zinc-200 dark:hover-zinc-800 duration-300 rounded"
            fillClass="fill-zinc-900 dark:fill-zinc-200"
          ></m-svg-icon>
          <m-button
            type="info"
            icon="heart"
            iconClass="fill-zinc-900 dark:fill-zinc-200"
          ></m-button>
        </div>
        <!-- 标题 -->
        <p
          class="text-base text-zinc-900 dark:text-zinc-200 ml-1 font-bold xl:text-xl xl:mb-5"
        >
          {{ pictrueInfo.title }}
        </p>

        <!-- 作者 -->
        <div class="flex items-center mt-1 px-1">
          <img v-lazy class="h-3 w-3 rounded-full" :src="pictrueInfo.avatar" />
          <span class="text-base text-zinc-900 dark:text-zinc-200 ml-1">{{
            pictrueInfo.author
          }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { getPexelsFromId } from '@/api/pexels'
import { isMobileTerminal } from '@/utils/flexible'
import { ref } from 'vue'
const router = useRouter()
const store = useStore()
const props = defineProps({
  id: {
    type: String,
    require: true
  }
})
// 获取图片内容
const pictrueInfo = ref({})
const getPexels = async () => {
  const res = await getPexelsFromId(props.id)
  pictrueInfo.value = res
}
getPexels()
const onTapClose = () => {
  store.commit('app/changRouterType', 'back')
  router.back()
}
</script>
